<template>
  <div>

    <span> hello world : UserInfo</span>

    <div>
      {{userInfo.nickName}}
    </div>

    <div>
      {{openId}}
    </div>
    <van-dialog ref="authDialog"
                :show="authShow"
                title="用户授权"
                message="为了更好的为您服务，小程序需要获得您的昵称和头像，请点击下面的按钮进行授权。"
                show-cancel-button
                confirm-button-open-type="getUserInfo"
                @close="onClose"
                @getuserinfo="getUserInfo">
    </van-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      authShow: false
    }
  },
  computed: {
    // 首页获取vuex的数据，必须使用计算属性，其余后期打开的页面则不需要
    userInfo () {
      return this.$store.state.userInfo
    },
    openId () {
      return this.$store.state.openId
    }
  },
  methods: {
    // 获取用户信息
    getUserInfo: function (e) {
      this.authShow = false
      console.log('获取用户信息：', e.mp.detail)
      this.$store.commit('updateUserInfo', e.mp.detail.userInfo)
      this.saveUserInfo()
    },
    // 检查用户是否存在，不存在则保存用户信息
    saveUserInfo () {
      let that = this
      const db = wx.cloud.database()
      const userInfo = db.collection('app_users')

      userInfo.where({
        _openid: that.$store.state.openId
      }).get().then(res => {
        console.log('查询数据库获取用户信息：', res)
        if (res.data.length === 0) {
          userInfo.add({
            data: that.$store.state.userInfo
          }).then(res => {
            that.$store.commit('updateUserId', res._id)
            console.log('添加用户成功：', res)
          }).catch(res => {
            console.log('添加用户失败：', res)
          })
        } else {
          console.log('用户已经存储：', res)
          that.$store.commit('updateUserId', res.data[0]._id)
        }
      })
    }
  },

  mounted () {
    let that = this

    // 试图获取用户信息的测试，如果失败，则弹出授权窗口
    wx.getSetting({
      success (res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function (data) {
              console.log('获取已授权用户的信息：', data.userInfo)
              that.$store.commit('updateUserInfo', data.userInfo)
              that.saveUserInfo()
            }
          })
        } else {
          that.authShow = true
        }
      },
      fail (res) {
        that.authShow = true
        console.log('获取用户信息失败：', res)
      }
    })
  }
}
</script>

<style scoped>
</style>
